<!-- components/popup.vue -->
<template>
  <!-- 遮罩层：点击关闭 -->
  <view v-if="isShow" class="mask" @click.stop>
    <!-- 弹窗主体：支持居中/底部定位 -->
    <view :class="['content', position]">
      <!-- 关闭按钮 -->
      <!-- <view class="close-btn" @tap.stop="handleClose">✕</view> -->

      <!-- 具名插槽：标题、内容、底部按钮 -->
      <slot name="title">
        <text class="default-title">{{ title }}</text>
      </slot>

      <slot name="body">
        <text class="default-body">{{ content }}</text>
      </slot>

      <slot name="actions">
        <view class="action-buttons">
          <button @tap.stop="handleConfirm">确定</button>
        </view>
      </slot>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    isShow: Boolean,        // 控制显示
    title: String,          // 默认标题
    content: String,        // 默认内容
    position: {             // 定位：'center' 或 'bottom'
      type: String,
      default: 'center'
    },
    closeOnClickMask: {     // 点击遮罩关闭
      type: Boolean,
      default: true
    }
  },
  methods: {
    handleClose() {
      console.log('关闭~e');
      
      if (this.closeOnClickMask) this.$emit('close');
    },
    handleCancel() {
      this.$emit('cancel');
    },
    handleConfirm() {
      this.$emit('confirm');
    }
  }
};
</script>

<style scoped>
.mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

.content {
  background: white;
  border-radius: 12rpx;
  padding: 70rpx 40rpx 68rpx 40rpx;
  text-align: center;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* width: 80%; */
  width: 580rpx;
  border-radius: 20rpx;
}

.bottom {
  position: fixed;
  bottom: 0;
  width: 100%;
  border-radius: 20rpx 20rpx 0 0;
}

.close-btn {
  position: absolute;
  top: 20rpx;
  right: 20rpx;
}

.action-buttons {
  display: flex;
  justify-content: space-around;
  margin-top: 52rpx;


}

.action-buttons button {
  width: 560rpx;
  height: 88rpx;
  background: #850C13;
  border-radius: 10rpx 10rpx 10rpx 10rpx;
  font-weight: 400;
  font-size: 36rpx;
  color: #FFFFFF;
  letter-spacing: 1px;
}

.default-title {
  font-weight: 400;
  font-size: 32rpx;
  color: #333333;
  line-height: 50rpx;
  letter-spacing: 1px;
  text-align: center;
  /* padding: 70rpx 0rpx 84rpx 0rpx; */
}

.default-body {
 
  background: #FFFFFF;
  border-radius: 10rpx 10rpx 10rpx 10rpx;
}
</style>